<template>
    <div class="nav">
        <el-menu class="el-menu-demo" mode="vertical">
            <el-row>
                <el-col :span="6">
                    <div class="grid-content bg-purple" @click="go_home">
                        <h2 class="pull-right ">发蜡旅行</h2>
                        <img src="../assets/img/f1.jpg" alt="" class="logo pull-right">
                    </div>
                </el-col>
                <el-col :span="7">
                    <form class="navbar-form navbar-left pull-right" style="margin-top: 20px">
                        <div class="form-group ">
                            <i class="el-icon-edit"></i>&nbsp;
                            <input type="text" class="form-control" placeholder="产品名、目的地">
                        </div>&nbsp;
                        <button type="submit" class="btn btn-primary">搜索</button>
                    </form>
                </el-col>
                <el-col :span="4" :offset="1">
                    <div class="grid-content bg-purple">

                        <h2><span class="glyphicon glyphicon-phone-alt" aria-hidden="true"
                                  style="margin-left: 40px"></span> 400-010-0000</h2>
                    </div>
                </el-col>
                <el-col :span="4" :offset="1">
                    <div class="grid-content bg-purple-light">
                        <div v-if="!this.token">
                            <div style="margin-top: 25px;margin-left: 40px">
                                <span @click="put_login">登录</span>
                                <span style="margin-left: 20px" @click="put_register"> 注册 <img
                                        src="../assets/img/gift.png" alt=""
                                        style="width: 15px;margin-bottom: 6px"></span>
                            </div>
                        </div>
                        <div v-else>
                            <div style="margin-top: 25px;margin-left: 40px">
                                <span @click="">{{username}}</span>
                                <span style="margin-left: 20px" @click="logout"> 注销 </span>
                            </div>
                        </div>
                        <Login v-if="is_login" @close="close_login" @go="put_register" @login_success="login_success"/>
                        <Register v-if="is_register" @close="close_register" @go="put_login"/>
                    </div>
                </el-col>
            </el-row>
            <hr>
        </el-menu>
    </div>
</template>


<script>
    import Login from "../components/Login"
    import Register from "../components/Register"

    export default {
        data() {
            return {
                url_path: sessionStorage.url_path || '/',
                is_login: false,
                is_register: false,
                username: this.$cookies.get('username') || '',
                token: this.$cookies.get('token') || '',
                is_search_tip: true,
                search_placeholder: '',
                word: '',
            }
        },
        components: {
            Login,
            Register,
        },
        methods: {
            on_search() {
                this.search_placeholder = '请输入想搜索的课程';
                this.is_search_tip = false;
            },
            off_search() {
                this.search_placeholder = '';
                this.is_search_tip = true;
            },
            go_search(word) {
                if (!word) {
                    word = this.word;
                }
                let wd = this.$route.query.wd || this.$route.query.word;
                if (wd !== word) {
                    this.$router.push(`/search?wd=${word}`);
                }
                this.word = '';
            },
            goPage(url_path) {
                // 已经是当前路由就没有必要重新跳转
                if (this.url_path !== url_path) {
                    this.$router.push(url_path);
                }
                sessionStorage.url_path = url_path;
            },
            put_login() {
                this.is_login = true;
                this.is_register = false;
            },
            close_login() {
                this.is_login = false;
            },
            put_register() {
                this.is_login = false;
                this.is_register = true;
            },
            close_register() {
                this.is_register = false;
            },
            login_success() {
                this.username = this.$cookies.get('username') || '';
                this.token = this.$cookies.get('token') || '';
            },
            logout() {
                this.username = '';
                this.token = '';
                this.$cookies.remove('username');
                this.$cookies.remove('token');
            },
            go_home(){
                this.$router.push('/home/')
            }
        },
        created() {
            sessionStorage.url_path = this.$route.path;
            this.url_path = this.$route.path;
        }
    }
</script>

<style scoped>
    .logo {
        width: 100px;
    }

    span {
        font-size: 15px;
        cursor: pointer;
        color: #ff7e62;
    }

    .nav {
        max-width: 1920px;
        width: 100%;
        margin: 0 auto;
    }
    .grid-content{
        cursor: pointer;
    }

</style>